<template>
  <div class="statistics">
    <el-tabs type="border-card">
      <el-tab-pane label="详单查询">
        <el-card>
          <!-- 搜索 -->
          <el-button
            type="success"
            icon="el-icon-download"
            @click="exportExcel()"
            >导出Excel</el-button
          >
          <!-- 数据 -->
          <el-table
            id="tableId"
            ref="orderData"
            :data="tabledata"
            style="width: 100%"
            border
          >
            <el-table-column prop="batchNo" label="批次号" align="center">
            </el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" align="center">
            </el-table-column>
            <el-table-column prop="statusDictName" label="修复状态" align="center">
            </el-table-column>
            <el-table-column prop="repairDate" label="修复时间" align="center">
            </el-table-column>
            <el-table-column prop="expireStatusDictName" label="批次是否过期" align="center">
            </el-table-column>
            <el-table-column prop="expireDate" label="过期日期" align="center">
            </el-table-column>
            <el-table-column prop="batchCount" label="上传记录数" align="center">
            </el-table-column>
            <el-table-column prop="repairerIdcardCount" label="修复记录数" align="center">
            </el-table-column>
            <el-table-column
              prop="unassignCount"
              label="待分配坐席身份证数量"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="maskModelDictName" label="加密方式" align="center">
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// xlsx
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
// 引入防抖函数
import debounce from "lodash.debounce";
import aaa from "../../static/aaa.json";

export default {
  data() {
    return {};
  },
  created() {
    console.log(aaa);
    this.tabledata = aaa.data.content;
  },
  methods: {
    //   导出数据
    exportExcel: debounce(function () {
      //导出当前表格
      var wb = XLSX.utils.table_to_book(document.querySelector("#tableId")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "详单数据.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }, 500),
  },
};
</script>

<style lang="scss" scoped>
.statistics {
  .iptt {
    width: 200px;
  }
  .data {
    display: inline-block;
    height: 40px;
    vertical-align: bottom;
    text-align: center;
    color: rgb(224, 103, 103);
    font-size: 14px;
    box-sizing: border-box;
    margin-left: 10px;
  }
}
</style>